<template>
  <div class="search">
    <span class="s1">输入搜索</span
    ><el-input
      placeholder="输入用户名称或手机号......"
      v-model="input"
      clearable
    >
    </el-input>
    <span class="s2">上次消费时间</span>
    <div class="block">
      <el-date-picker v-model="value1" type="date" placeholder="开始日期" value-format="yyyy-MM-dd">
      </el-date-picker>
    </div>
    <span class="s3"></span>
    <div class="block">
      <el-date-picker v-model="value2" type="date" placeholder="结束日期" value-format="yyyy-MM-dd">
      </el-date-picker>
    </div>
    <el-button type="primary" class="btn" @click="searchFun(input)"
      >查询</el-button
    >
    <el-button class="btn1">重置</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      value1: "",
      value2: "",
    };
  },
  methods: {
    searchFun() {
      this.$emit('searchparent',this.input,this.value1,this.value2)//向父组件传
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 64px;
  background-color: #fff;
  margin-bottom: 20px;
  .s1 {
    display: block;
    margin-left: 30px;
    float: left;
    width: 70px;
    height: 64px;
    line-height: 64px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
  }
  .el-input {
    width: 186px;
    margin: 16px 0;
    float: left;
  }
  /deep/.el-input__inner {
    float: left;
    font-size: 12px;
    padding-left: 12px;
    width: 186px;
    height: 32px;
  }
  /deep/.el-input__inner::placeholder {
    color: #333;
  }
  .s2 {
    display: block;
    margin-left: 30px;
    float: left;
    width: 100px;
    height: 64px;
    line-height: 64px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
  }
  .s3 {
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 2px;
    background-color: #ecf0f4;
    // border: 2px solid #333;
    position: absolute;
    top: 30px;
    left: 618px;
  }
  .el-date-editor {
    margin-right: 52px;
  }
  /deep/.el-input__icon {
    display: none;
  }
  .btn {
    font-size: 16px;
    font-weight: 700;
    padding: 0 24px;
    line-height: 32px;
    margin-top: 16px;
    margin-right: 30px;
  }
  .btn1 {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    padding: 0 24px;
    line-height: 32px;
    margin-top: 16px;
    margin-right: 30px;
  }
}
</style>
